class odiv{
				constructor(str){
					this.parent=document.querySelector(str);
					this.btn = this.parent.querySelectorAll('input');
					this.li = this.parent.querySelectorAll('ul li');
					var left = document.getElementById("left")
					var right = document.getElementById("right")
					this.show();
				}
				show(){
					let _this = this;
					for(let i=0;i<this.btn.length;i++){
						this.btn[i].onclick = function(){
							_this.index = i;
							_this.fn(i);
						}
					}
				}
				fn(i){
					for(var j=0;j<this.li.length;j++){
						this.btn[j].className = '';
						this.li[j].className = '';
					}
					this.li[i].className = 'show';
					this.btn[i].className = "active";
				}
}

                class AutoPlayodiv extends odiv{
                	constructor(str){
                		super(str);
                		this.autofn();
                		this.index = 0;
                	}
                	autofn(){
                		var _this = this;
                		setInterval(function(){
                			_this.index++
                			if(_this.index == _this.btn.length){
                				_this.index = 0;
                			}
                			_this.fn(_this.index)
                		},1500)
                	}
                }
                


			window.onload = function(){
				new odiv("#odiv1");
				new AutoPlayodiv("#odiv2");
//				new div3("#odiv3");
			}
